<template>
  <div>
    <a-button style="margin: 30px 0" type="primary" icon="plus" @click="authorityAdd">添加角色</a-button>
    <AuthorityAdd
      :authorityTitle="authorityTitle"
      :authorityType="authorityType"
      v-on:authorityCancel="authorityCancel"
      v-on:authorityOk="authorityOk"
    />
    <a-table :columns="columns" :data-source="data">
      <!-- 自定义操作 -->
      <div slot="action" slot-scope="text,record">
        <a-button type="primary" style="margin-right: 10px" @click="edit(record)" icon="edit">编辑</a-button>
        <a-button type="danger" icon="delete">删除</a-button>
      </div>
    </a-table>
  </div>
</template>

<script>
import AuthorityAdd from './components/AuthorityAdd.vue'

const columns = [
  {
    title: '员工角色',
    dataIndex: 'role',
    key: 'role',
    align: 'center',
  },
  {
    title: '概述',
    dataIndex: 'overview',
    key: 'overview',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '员工数量',
    dataIndex: 'amount',
    key: 'amount',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  },
];
const data = [];
for (let i = 1; i< 8; i++){
  data.push({
    id: i,
    role: '超级管理员',
    amount: i+5,
    overview: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
  })
}

export default {
  name: 'Roles',
  components: {
    AuthorityAdd,
  },
  data() {
    return {
      data,
      columns,
      authorityTitle: '',    //  添加及编辑 modal 的标题
      authorityType: false,   //  添加 modal 的状态
    };
  },

  methods: {
    //  编辑角色
    edit(record) {
      console.log(record)
      this.authorityType = !this.authorityType
      this.authorityTitle = "编辑角色"
    },
    //  添加角色
    authorityAdd() {
      this.authorityType = !this.authorityType
      this.authorityTitle = '添加角色'
    },
    //  添加及修改 modal 的确认
    authorityOk(value) {
      this.authorityType = value
    },
    //  添加及修改 modal 的取消
    authorityCancel(value) {
      this.authorityType = value
    },
  },
};
</script>

<style scoped>

</style>
